<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="inp" /><button id="save">保存</button
    ><button onclick="del()">清空</button>
    <ul></ul>
  </body>
  <script>
    window.onload = function () {
      showLists()
      save.onclick = save
      inp.onkeydown = function () {
        if (event.keyCode == 13) {
          save()
        }
      }
    }
    function save() {
      var input = document.querySelector('input')
      //存储到本地存储
      if (input.value) {
        var lists = JSON.parse(localStorage.getItem('lists')) ?? []
        lists.push(input.value)
        localStorage.setItem('lists', JSON.stringify(lists))
        showLists()
      }
    }
    function del() {
      localStorage.removeItem('lists')
      showLists()
    }
    //显示任务列表
    function showLists() {
      var lists = JSON.parse(localStorage.getItem('lists')) ?? []
      var strHtml = ''
      for (var i in lists) {
        strHtml += `<li>任务${+i + 1}:${lists[i]}</li>`
      }
      document.querySelector('ul').innerHTML = strHtml
    }
  </script>
</html>
